iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

30 天轉生到 bootstrap 5 的意識界系列 第 4

第 4 集:CSS 盒模型(box model)

  • 分享至 

  • xImage
  •  

此篇會介紹 box-model 是什麼以及如何使用,最後會分享幾個使用技巧以及常見的迷思,建議閱讀前至少要認識 margin、padding 再來閱讀會比較適合。

一個網頁是由無數個元素所構成的,網頁就像是一個大盒子,裡面裝了無數個小盒子,而每個小盒子又各自可以再放入無限個小盒子。

  • 每一個盒子又稱 box model

apple-boxModel

chrome 插件:toggle pesticide

  • 我常用來查看元素是否有跑版,間距是否有正常顯示,是否有依照我們預期的排版方式呈現等等的。

box model

一個 box model 包含,margin、border、padding、content。

  • margin:推擠元素外部的間距。(⚠️ 可以為負值,但會與其它元素重疊)
  • border:框線(包覆內容)。
  • padding:推擠元素內部的間距。(⚠️ 不能為負值)
  • content:內容(任何 HTML 元素)。

演釋:

<div class="box">
  <p class="text-top">上</p>
  <p class="text-bottom">下</p>
</div>
.box {
  width: 300px;
  border: 5px solid red;
}
.text-top {
  background: green;
}
.text-bottom {
  background: orange;
}

上方圖片,可以看出兩個 <p> 標籤彼此連在一起,下方在 <p> 標籤上添加 marginpadding 的樣式。

.text-top {
  background: green;
  margin-bottom: 8px;
}
.text-bottom {
  background: orange;
  padding: 8px;
}

  • margin:向下推擠出 8px 的距離
    • 常用來推擠出多個元素之間的距離
  • padding 向內推擠出 8px 的距離
    • 常用來推擠元素與外邊界的距離

box-sizing

計算 box-model 寬高的方式。

content-box:預設值

  • 實際寬高=所設定的數值+border+padding

border-box:確保元素計算寬度及高度時,不受 paddingborder 影響。

  • 實際寬高=所設定的數值(包含 paddingborder)

border-sizing對比

Bootstrap 也是使用 border-box 的方法。

Bootstrap border-sizing

⚠️ 記得 border-box 要寫在樣式載入前面。(通常會寫在樣式最前面,或是寫在全域(全站)樣式設定中,之後會介紹)


技巧 & 迷思

margin 對於父容器的大小影響

  • 最下面子元件的 margin-bottom 不會影響父容器高度。
  • 最上面子元件的 margin-top 不會影響父容器高度。

margin、padding 該選擇哪個來推擠空間?

  • 為了推擠出元素彼此間的距離那我會使用 margin。
  • 為了推擠父元素內的間距,使內層子元素符合排版需求我會選擇 padding。

margin-top、margin-bottom 或 margin-left、margin-right ?

  • 為了推擠出元素之間的距離兩種都可以自己喜歡就好,但寫法要統一,不要一下用 margin-top 推,一下又用 margin-bottom(除了最上面以最下的的元素之外)。

IE 盒模型

  • 預設的計算方式,同等於 box-sizing: border-box

水刀
獲得技能水流移動

可以透過 box model 來靈活調整元素的間距


上一篇
第 3 集:CSS 魔力
下一篇
第 5 集:CSS 社交距離(上)
系列文
30 天轉生到 bootstrap 5 的意識界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言